<template>
	<splitpanes horizontal>
		<pane size="50">
			<el-form class="my-1" >
				<el-form-item>
					<el-button icon="el-icon-plus"  type="primary"  @click="checkandopen">{{ $t('basProcess.add') }} </el-button>
					<el-button icon="el-icon-delete" type="danger" @click="handleDelete(selectObjs)">
						{{ $t('basProcess.delete') }}
					</el-button>
				</el-form-item>
			</el-form>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				style="width: 100%; height: 79%"
				stripe
				highlight-current-row
				:header-cell-style="tableStyle.headerCellStyle"
				@row-click="clickRow"
				@sort-change="sortChangeHandle"
				@selection-change="selectionChangeHandle"
			>
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" label="#" width="50" />
				<el-table-column prop="productionLineCode" :label="$t('basProcess.productionLineCode')" :width="320">
					<template #default="scope">
						<el-button-group size="small">
							<el-button type="info" class="w-[140px]">{{scope.row.productionLineName}}</el-button>
							<el-button  plain class="w-[140px]">{{scope.row.productionLineCode}}</el-button>
						</el-button-group>
					</template>
				</el-table-column>

<!--				<el-table-column prop="productionLineCode" :label="$t('basProcess.productionLineCode')" />-->
<!--				<el-table-column prop="productionLineName" :label="$t('basProcess.productionLineName')" />-->
				<!--<el-table-column prop="inputMaterialCode" :label="$t('basProcess.inputMaterialCode')"  />-->
				<el-table-column prop="outputMaterialCode" :label="$t('basProcess.outputMaterialCode')" width="140"/>
				<el-table-column prop="lastMaterialCode" :label="$t('basProcess.lastMaterialCode')" width="140"/>
				<el-table-column prop="isPqc" :label="$t('basProcess.isPqc')" width="100">
					<template #default="scope">
						<!--根据不同的状态选择不同的颜色的tag-->
						<el-tag size="large" :type="scope.row.isPqc === 'Y' ? 'success' : 'danger'" v-if="scope.row.isPqc.length > 0">
							{{ scope.row.isPqc }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="isProductCheck" :label="$t('basProcess.isProductCheck')" width="100">
					<template #default="scope">
						<!--根据不同的状态选择不同的颜色的tag-->
						<el-tag size="large" :type="scope.row.isProductCheck === 'Y' ? 'success' : 'danger'" v-if="scope.row.isProductCheck.length > 0">
							{{ scope.row.isProductCheck }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="productionlineStatus" :label="$t('mes.status')">
					<template #default="scope">
						<el-tag size="large" type="" v-if="scope.row.productionlineStatus === 'powerOn' && scope.row.productionlineStatus.length > 0">
							{{ $t('basProcess.' + scope.row.productionlineStatus) }}
						</el-tag>
						<el-tag size="large" type="danger" v-else-if="scope.row.productionlineStatus === 'powerOff' && scope.row.productionlineStatus.length > 0">
							{{ $t('basProcess.' + scope.row.productionlineStatus) }}
						</el-tag>
						<el-tag
							size="large"
							type="warning"
							v-else-if="scope.row.productionlineStatus === 'breakdown' && scope.row.productionlineStatus.length > 0"
						>
							{{ $t('basProcess.' + scope.row.productionlineStatus) }}
						</el-tag>
						<el-tag
							size="large"
							type=""
							effect="dark"
							v-else-if="scope.row.productionlineStatus === 'production' && scope.row.productionlineStatus.length > 0"
						>
							{{ $t('basProcess.' + scope.row.productionlineStatus) }}
						</el-tag>
						<el-tag size="large" type="success" v-else-if="scope.row.productionlineStatus.length > 0">
							{{ $t('basProcess.' + scope.row.productionlineStatus) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('basProcess.operation')" >
					<template #default="scope">
						<el-button icon="edit" type="primary" size="small" v-auth="'platform_basDicSet_edit'" @click="prdlineFormDialogRef.openEditDialog(scope.row)">
						</el-button>
						<!-- <el-button icon="delete" type="primary" text
											 @click="handleDelete([scope.row.id])">
											 {{$t('basProcess.delete')}}
						</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</pane>
		<pane size="50">
			<div class="layout-padding-auto layout-padding-view">
				<bind ref="dataFormBindRef"></bind>
			</div>
		</pane>
	</splitpanes>
	<prdlineForm ref="prdlineFormDialogRef" @refresh="getDataList(false)" />
</template>

<script setup lang="ts">
//  table hook
import { BasicTableProps, useTable } from '/@/hooks/table';
import { deleteProductionlineByIds, getProductionlineByProcessId } from '/@/api/platform/digital/basProcess';
import { defineAsyncComponent, reactive, ref } from 'vue';
import bind from '/@/views/digital/basProcess/bind.vue';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const prdlineForm = defineAsyncComponent(() => import('./prdlineForm.vue'));
const prdlineFormDialogRef = ref();
const dataFormBindRef = ref();
const fclickRow = ref();
let warehouseId = '';

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getProductionlineByProcessId,
});

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

//校验打开新增
const checkandopen = (data: any) => {
	if (state.queryForm.id) {
		prdlineFormDialogRef.value.openAddDialog(state.queryForm.id);
	} else {
		useMessage().error(t('basProcess.selectProcess'));
	}
};

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: Array<number>) => {
	if (ids?.length === 0) {
		return useMessage().warning(t('basProcess.selectDelete'));
	}

	const idArray: IdArray = ids.map((item) => item);

	useMessageBox()
		.confirm(t('basProcess.permanentlyDeleted'))
		.then(async () => {
			try {
				await deleteProductionlineByIds({
					Ids: idArray,
				});
				getDataList();
				useMessage().success(t('basProcess.deleteSuccess'));
			} catch (err: any) {
				useMessage().error(t('basProcess.deleteFaild') + err.msg);
			}
		});
};

let rowref = ref();

// 刷新表格
const refresh = (row: any) => {
	state.queryForm.id = row.id;
	warehouseId = row.warehouseId;
	rowref = row;
	getDataList();
	//clickRow(0)
};

// 点击行的时候触发
const clickRow = (row: any) => {
	dataFormBindRef.value.refresh(row, row.id, warehouseId);
};

// 暴露变量
defineExpose({
	refresh,
});
</script>